<!DOCTYPE html><html><head><title>02-常见的css和盒子模型</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="02-常见的css和盒子模型">02-常见的css和盒子模型</h1>



<h3 id="一css层叠样式表">一、CSS层叠样式表</h3>

<p>1、基本语法：主要由两部分组成：<code>选择器</code> + <code>样式属性</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs css"><div class="hljs-line">    <span class="hljs-selector-tag">p</span>{ <span class="hljs-attribute">font-size</span>:<span class="hljs-number">24px</span>; <span class="hljs-attribute">color</span>:red; }
</div></code></pre>



<h3 id="二color样式的多种属性值">二、color样式的多种属性值</h3>

<p>1、颜色的英文单词</p>



<pre class="prettyprint hljs-dark"><code class="hljs processing"><div class="hljs-line">    <span class="hljs-built_in">color</span>: <span class="hljs-built_in">red</span>;
</div></code></pre>

<p>2、十六进制</p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">color</span>: <span class="hljs-number">#ff000</span>;
</div></code></pre>

<p>3、rgb( );  <br>
<code>r：红色 g：绿色  b：蓝色 ,每个颜色数值范围为 0-255</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">color</span>: rgb(<span class="hljs-number">255</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
</div></code></pre>

<p>4、rgba( );  <br>
<code>a为透明度，取值范围：0-1</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">color</span>: rgba(<span class="hljs-number">255</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">5</span>);
</div></code></pre>



<h3 id="三盒子模型">三、盒子模型</h3>



<h4 id="1外边距margin">1、外边距：margin**</h4>

<p><strong><code>简写样式：</code></strong>上右下左</p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">margin</span>:<span class="hljs-number">10px</span>;    <span class="hljs-comment">//四个方向的外边距为10px</span>
</div></code></pre>

<p><strong><code>单样式：</code></strong></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">margin-top</span>:<span class="hljs-number">10px</span>;        <span class="hljs-comment">//顶部外边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">margin-bottom</span>:<span class="hljs-number">20px</span>;     <span class="hljs-comment">//底部外边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">margin-right</span>:<span class="hljs-number">30px</span>;      <span class="hljs-comment">//右边外边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">margin-left</span> :<span class="hljs-number">40px</span>;      <span class="hljs-comment">//左边外边距</span>
</div></code></pre>

<p><strong><code>水平居中:</code></strong></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span> auto;       <span class="hljs-comment">//让块级盒子水平居中</span>
</div></code></pre>



<h4 id="2内边距padding">2、内边距：padding**</h4>

<p><strong><code>简写样式：</code></strong>上右下左</p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">padding</span>:<span class="hljs-number">10px</span>;    <span class="hljs-comment">//四个方向的内边距为10px</span>
</div></code></pre>

<p><strong><code>单样式：</code></strong></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">padding-top</span>:<span class="hljs-number">10px</span>;       <span class="hljs-comment">//上内边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">padding-bottom</span>:<span class="hljs-number">20px</span>;    <span class="hljs-comment">//下内边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">padding-right</span>:<span class="hljs-number">30px</span>;     <span class="hljs-comment">//右内边距</span>
</div><div class="hljs-line">    <span class="hljs-attribute">padding-left</span>    :<span class="hljs-number">40px</span>;  <span class="hljs-comment">//左内边距</span>
</div></code></pre>

<p><strong><code>注：</code></strong>padding会改变盒子的大小</p>



<h4 id="3边框border">3、边框：border</h4>

<p><code>border-width</code>  边框粗细                       </p>



<pre class="prettyprint hljs-dark"><code class="hljs maxima"><div class="hljs-line">    <span class="hljs-built_in">border</span>-<span class="hljs-built_in">width</span> : 10px；
</div></code></pre>

<p><code>border-style</code>  样式 <br>
<code>实线：solid ;   虚线：dashed;   点线：dotted;  双边框：double</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">border-style</span>: solid;   <span class="hljs-comment">//实线边框</span>
</div></code></pre>

<p><code>border-color</code>  颜色</p>



<pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line">    <span class="hljs-attribute">border-style</span>: <span class="hljs-number">#f00</span>;   
</div></code></pre>



<h3 id="三盒子模型-1">三、盒子模型</h3>



<h4 id="1盒子模型占位计算">1、盒子模型占位计算</h4>

<blockquote>
  <p>盒子大小 = <code>样式宽</code>  +   <code>内边距</code> + <code>边框</code> <br>
   盒子宽度 =  <code>左border</code> + <code>左padding</code> + <code>width</code> + <code>右padding</code>  + <code>右border</code> <br>
   盒子高度 = <code>上border</code> + <code>上padding</code> + <code>height</code> + <code>下padding</code> +<code>下border</code></p>
</blockquote>

<p><code>注：</code>px像素 是显示器中的大小单位，%是相对父级大小的占比</p></div></body></html>